<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      *{
        margin:0;
        padding:0;
      }
      body {
          padding-top: 1.5rem;
          border:0;
          background-color: rgba(255,255,255,0.1);

      }
      .all{
        width: 100%;
        height: 100%;
        position: fixed;
      }
      .all_img{
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.1);
        z-index: -1;
      }
      .all_img img{
        width: 100%;
        height: 100%;


      }
      .fl{
        float: left;
      }
      .fr{
        float: right;
      }
      .header{
        width: 93%;
        height:2.5rem;
        padding:0.5rem 0.8rem;
        z-index: 999;
        position: absolute;
        top:1.5rem;
        /*border: 0.1rem solid red;*/

      }
      .header_left{
        width:auto;
        height: 2.3rem;
        background-color:rgba(0,0,0,0.4);
        padding: 0.2rem 0.2rem;;
        border-radius: 2rem;

      }
      .left_img{
        width: 2.2rem;
        height: 2.2rem;
      border-radius:50%;

       overflow:hidden;
      }
      .left_img img{
        width: 100%;
        height: 100%;
      }
      .left_p{
        color: #fff;
        width: auto;
        font-size: 0.8rem;
        margin-top: 0.3rem;
        margin-left: 0.2rem;
      }
      .left_gz{
        width: auto;
        height: 1.7rem;
        color: #fff;
        background-color: #40cccc;
        line-height: 1.7rem;
        padding: 0rem 0.6rem;
        border-radius: 1rem;
        font-size: 0.9rem;
        margin-top: 0.3rem;
          margin-left: 0.2rem;
      }
      .header_right{
        width: auto;
        margin-top: 0.2rem;
        overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    flex-wrap: nowrap;

      }
      .right_img{
        width: 2.2rem;
        height: 2.2rem;
      border-radius:50%;
      overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

         margin-left: 0.2rem;
      }
      .right_img img{
        width: 100%;
        height: 100%;
      }
      .heaght_c{
        width: auto;
        height: auto;
        background-color: #fff;
        z-index: 999;
        border-radius: 50%;
        padding: 0rem;
        position: fixed;
        top:2.2rem;
        right: 0.8rem;
      }
      .c_img{
        width: 2rem;
        height: 2rem;
      }
      .c_img img{
        width: 100%;
        height: 100%;
      }
      .time{
        position: relative;
        right:0.8rem;
        top:3.5rem;
        width: auto;
      }
      .time p{
        background-color: rgba(0,0,0,0.4);
        color: #fff;
        font-size: 0.7rem;
        border-radius: 1rem;
        margin-top: 0.3rem;
        padding: 0.2rem 0.1rem;
      }
      .nav{
        position: absolute;
        left:0.8rem;
        top:5.2rem;
      }
      .one{
        width: auto;
        height: auto;
        /*margin-top: 0.5rem;*/
      }
      .nav_one{
        width: 100%;
        height: 7.5rem;
      }
      .nav_one img{
        width: 100%;
        height: 100%;
      }
      .one_cuo{
        width: 1.2rem;
        height: 1.2rem;
        position: relative;
        bottom:7.5rem;
        left:75%;
        z-index: 999;
      }
      .one_cuo img{
        width: 100%;
        height: 100%;
      }
      .nav_p{
        width: 100%;
        height: 1.5rem;
        color: #fff;
        background-color: rgba(0,0,0,0.4);
        line-height: 1.5rem;
        font-size: 0.9rem;
        text-align: center;
        position: relative;
        bottom: 2.7rem;
      }
      .cont_txt{
        width: 80%;
        max-height: 20rem;
        min-height: 0rem;
        overflow: auto;
        z-index: 999;
        position: absolute;
        bottom:3.5rem;
        left:0.8rem;
      }
      .text{
        width: auto;
        height: auto;


      }
      .text_p{
        width:auto;
        white-space:wrap;
        margin-right: 1rem;
        padding: 0.4rem;
        border-radius: 0.7rem;
        color: #fff;
        background-color: rgba(0,0,0,0.15);
        margin-top: 0.5rem;
        font-size: 0.9rem;

      }
      .span{
        color: #40cccc;
        display: inline;
      }
      .span1{
        color: yellow;
        display: inline;
      }
      .span_img{
        width: 1rem;
        height: 1rem;
      }
      .span_img img{
        width: 100%;
        height: 100%;
      }
      .footer{
        width: 93%;
        position: absolute;
        bottom:0.5rem;
        left:0.8rem;
        z-index: 999;
      }
      .input{
        width: 75%;
        height: 2rem;
        background:none;
        background-color:rgba(243,243,243,0.5);

         outline:none;
         border:1px solid #ccc;
         border-radius: 1rem;
        padding: 0.3rem;
      }
      .footer_r{
        width: 20%;
        height: 2.5rem;
        border-radius: 0.5rem;
        background-color: #40cccc;
        color: #fff;
        text-align: center;
        margin-top: 0.1rem;
        line-height: 2.5rem;
      }
      </style>
  </head>
  <body>

  </body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
<script type="text/javascript">
        var room_name, user_id, roomToken;
        var qiniuLive;
        var id
        var head_url
        var title
        apiready = function() {
          id = api.pageParam.id
          api.addEventListener({
            name: 'keyback'
            }, function(ret, err){
              api.confirm({
                  title: '是否确认关闭直播?',
                  buttons: ['确定', '取消']
              }, function(ret, err) {
                  if (ret.buttonIndex == 1) {
                    msgcode('关闭成功')
                    qiniuLive.stopStream(function(ret){
                      //  alert(JSON.stringify(ret));
                    });
                    qiniuLive.destroyStream();
                    //zx_room(id)
                    setTimeout(function () {
                      api.closeWin({

                      });

                    },1000)
                  }
              });
            });
                qiniuLive = api.require('qiniuLive');
                qiniuLive.initStreamingEnv(function(ret) {

                        if (ret.status) {
                                console.log('initStreamingEnv成功' + JSON.stringify(ret));

                                qiniuLive.addRtcStateDidChangeListener(function(ret) {
                                        console.log('addRtcStateDidChangeListener---' + JSON.stringify(ret));
                                        if (ret.state == 'inited') {
                                                if (api.systemType == "ios") {
                                                    //    fnconfigConference();
                                                        //fnstartConference();
                                                }
                                        }
                                });

                                qiniuLive.addEventListener({ //流状态已变更事件
                                        name: 'streamStatus'
                                }, function(ret) {
                                        console.log('streamStatus---' + JSON.stringify(ret));
                                        if (ret.streamStatus == 17) {  //Android适用
                                                //fnconfigConference();
                                        }
                                        if (ret.streamStatus == 8) {

                                        }
                                });

                                qiniuLive.addRoomOIListener(function(ret) {
                                        console.log('主播进出房间' + JSON.stringify(ret));
                                        if (ret.eventType == "didJoin") {
                                                //alert(ret.userID + "进入房间")
                                        }
                                });

                                qiniuLive.addRtcDidFailListener(function(ret) {
                                        console.log('错误回调addRtcDidFailListener的监听' + JSON.stringify(ret));
                                });
                        }
                });
             //get_tlurl()
             get_tlurl()

             setTimeout(function () {
               qiniuLive.startStream(function(ret, err) {
                       if (ret.status == true) {
                               console.log('推流成功');
                       } else {
                               //start_stream();
                               console.log('推流失败');
                       }
               });

             },1500)

             setTimeout(function () {
               api.openFrame({

                           name: 'lives',

                           url: './lives.html',

                           rect: {

                               x: 0,

                               y: 0,

                               w:'auto',           //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度

                               h:'auto'            //高度，若传'auto'，页面从y位置开始自动充满父页面高度

                           },

                        bounces: false,
                        bgColor:'rgba(0, 0, 0, 0.5)',

                           pageParam: {

                               id: id,
                               title:title,
                               head_url:head_url

                           }

                       });
             },1500)
        };

      //后台获取推流地址
     function get_tlurl() {

        api.ajax({
            url: SITE_URL+'livebr/lives/index',
            method: 'post',
            data: {
                values: {
                    id: id
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){

                head_url = ret.shop_head
                title = ret.title
                fnsetStreamingProfile(ret.data)

                setTimeout(function () {
                  qiniuLive.startStream(function(ret) {
                          if (ret.status == true) {
                                  console.log('推流成功');
                          } else {
                                  //start_stream();
                                  console.log('推流失败s');
                          }
                  });
                },2500)
              }else{


              }
                //alert( JSON.stringify( ret ) );
            } else {
              msgcode('获取数据失败')
              api.closeWin({

              });
                //alert( JSON.stringify( err ) );
            }
        });

       }

        //rong，销毁房间
       function zx_room(id){

         //会员头像
         var appKey = "pwe86ga5p99q6";
         var appSecret = "tTNc5tntn1oc";
         var nonce = Math.floor(Math.random() * 1000000);
         //随机数
         var timestamp = Date.now();
         //时间戳
         var signature = sha1("" + appSecret + nonce + timestamp);
         //数据签名(通过哈希加密计算)
         api.ajax({
                 url : "http://api-cn.ronghub.com/chatroom/destroy.json",
                 method : "post",
                 headers : {
                         "RC-App-Key" : appKey,
                         "RC-Nonce" : "" + nonce,
                         "RC-Timestamp" : "" + timestamp,
                         "RC-Signature" : "" + signature,
                         "Content-Type" : "application/x-www-form-urlencoded"
                 },
                 data : {
                         values : {
                                 chatroomId:id
                         }
                 }
         }, function(ret, err) {
                 if (ret) {
                 console.log('销毁成功')
                         //将token存储到本地
                     //    alert("你的token是："+ret.token);
                 } else {

                         //alert("获取token失败")
                 }
         });
       }




// 配置直播流参数，初始化推流预览区域
        function fnsetStreamingProfile(pkuid) {
            //  alert(pkuid)
                //$api.setStorage('uid', pkuid);
            qiniuLive.setBrightness({
                brightness: 95
            }),

                qiniuLive.setStreamingProfile({
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            remoteWindowRect: [{
                x: api.frameWidth - 120,
                y: api.frameWidth * (4/3) - 160,
                w: 120,
                h: 160
            }],
            pushUrl: pkuid,
            videoCapture: {
                videoFrameRate: 20,
                sessionPreset: '1280*720',
                previewMirrorFrontFacing: true,
                previewMirrorRearFacing: false,
                streamMirrorFrontFacing: false,
                streamMirrorRearFacing: false,
                videoOrientation: 'portrait',
                cameraPosition: 'front'
            },
            previewSetting: {
                previewSizeLevel: 'small', // 字符类型；相机预览大小等级
                // 取值范围：small, medium, large
                previewSizeRatio: 'ratio_4_3' // 字符类型；相机预览大小比例 //这个会改变本地的比例大小吗？
                    // 取值范围：ratio_4_3, ratio_16_9
            },
            videoEncodeHeight: '1080',
            videoStream: {
                videoSize: {
                    width: 368,
                    height: 640
                },
                videoQuality: 'medium3'
            },
            audioQuality:'high',
            localWinPosition: {
                x: 0,
                y: 0,
                w: 480,
                h: 640
            },
            encodeOritation: "protrait",
            face: {
                beautify: false,
                setBeautify: 0,
                setWhiten: 0,
                setRedden: 0
            },
            continuousFocus: false,
            fixedOn: api.frameName,
            fixed: true
        }, function(ret) {
            if (ret.status) {
                console.log('setStreamingProfile成功' + JSON.stringify(ret));

            }else {
                console.log('setStreamingProfile失败');
            }
        });

        }

//开始推流



//配置连麦
//         function fnconfigConference(x) {
//
//                 qiniuLive.configConference({
//                         videoEncodingSizeRatio: 'ratio_4_3',
//                         videoEncodingSize: 480,
//                         videoBitrateRange: {
//                                 from: 100 * 1000,
//                                 to: 300 * 1000
//                         },
//                         fps: 20,
//                         mixVideoSize: { //默认跟setStreamingProfile接口的videoStream ->videoSize参数保持一致
//                                 width: 640,
//                                 height: 480
//                         },
//                         localVideoRect: {
//                                 x: x, //（可选项）数字类型；x 坐标；默认值：0
//                                 y: 0, //（可选项）数字类型；y 坐标；默认值：0
//                                 width: 320,
//                                 height: 480,
//                                 //width: parseInt(api.frameWidth),
//                                 //height: parseInt(api.frameHeight)
//                         },
//                         mixOverlayRectArray: [{ //控制观众端的对方画面
//                                         x: 480,
//                                         y: 0,
//                                         w: 480,
//                                         h: 640
//                                 }
//                                 // , {
//                                 //         x: 120,
//                                 //         y: 120,
//                                 //         w: 120,
//                                 //         h: 120
//                                 // }
//                         ],
//                         rejoinTimes: 3,
//                         connetTimeout: 5000
//                 }, function(ret) {
//                         if (ret.status) {
//                                 console.log('configConference成功' + JSON.stringify(ret));
//                                 fnstartStream();
//                         } else {
//                                 console.log('configConference失败');
//                         }
//                 });
//         }
//
// // 从服务器获取直播房间号、token，然后开始连麦
//         function fnstartConference(uid) {
//
//                 api.ajax({
//                         type: 'get',
//                         url: 'http://www/*****/fangjian?uid=' + uid   //填写自己的服务器接口地址
//                 }, function(ret) {
//                         var room = ret.content;
//                         room_name = room.room_name;
//                         roomToken = room.roomToken;
//                         qiniuLive.startConference({
//                                 userId: uid,
//                                 roomName: room_name,
//                                 roomToken: roomToken
//                         }, function(ret, err) {
//                                 if (ret) {
//                                         console.log('startConference---' + JSON.stringify(ret));
//                                 } else {
//                                         console.log('startConference---' + JSON.stringify(err));
//                                 }
//                         });
//                 })
//         }
//
// //停止推流、停止连麦
//         function stopStearm() {
//                 qiniuLive.stopStream(function(ret) {
//                         alert('已停止推流');
//                 });
//                 qiniuLive.stopConference(function(ret) {
//                         //  alert('结束连麦');
//                 });
//         }
//
//
// // 初始化播放器，播放端调用
//         function fninitPMediaPlayer() {
//                 qiniuLive.initPMediaPlayer({
//                         rect: {
//                                 x: 0,
//                                 y: 0,
//                                 w: 320,
//                                 h: 480
//                         },
//                        dataUrl: 'rtmp://xxx/*****',     //填写自己的拉流地址
//                         codec: 0,
//                         prepareTimeout: 10000,
//                         readTimeout: 10000,
//                         isLiveStream: true,
//                         isDelayOptimization: true,
//                         cacheBufferDuration: 2000,
//                         maxCacheBufferDuration: 4000,
//                         fixedOn: api.frameName,
//                         fixed: true
//                 }, function(ret) {
//                         alert(JSON.stringify(ret));
//                 });
//         }
//

//开始播放， 播放端调用
        function fnstart() {
                qiniuLive.start(function(ret) {
                        alert(JSON.stringify(ret));
                });
        }
</script>

</html>
